<script>
import Form from './index.vue'
export default {
    components:{
        Form
    },
    props:{
        title:{
            type:String,
            default:'工作经历'
        },
        width:{
            default:'50%'
        },
        value:{
            type:Object,
            required:true,
            default(){
                return null
            }
        },

        confirmText:{
            default:'确 定'
        },
        confirmBtnLoading:{
            type:Boolean,
            default:false
        },
        confirmBtnDisabled:{
            type:Boolean,
            default:false
        },

        cancelText:{
            default:'取 消'
        },
        cancelBtnDisabled:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {

        }
    },
    computed:{
        form:{
            get(){
                return this.value
            },
            set(form){
                this.$emit('input',{ ...form })
            }
        },
        attrs(){
            const attrs = { ...this.$attrs }

            attrs['title'] = this.title
            attrs['width'] = this.width

            // 移除非 Dialog 的属性
            const unnecessaryAttrs = [
                'confirmText',
                'confirmBtnLoading',
                'confirmBtnDisabled',

                'cancelText',

                'value'
            ]

            for(let attr of unnecessaryAttrs)
                delete attrs[attr]

            return attrs
        },
        listeners(){
            const listeners = { ...this.$listeners }

            const unnecessaryListener = [
                'input'
            ]

            for(let listener of unnecessaryListener)
                delete listeners[listener]

            return listeners
        },
        hasFooterSlot(){
            return this.$slots.footer !== undefined
        }
    },
    methods:{
        handleConfirm(){
            this.$emit('confirm')
        },
        handleCancel(){
            this.$emit('cancel')
        },
        resetFields(){
            this.$refs['form']?.resetFields?.()
        }
    }
}
</script>

<template>
    <el-dialog 
        v-bind="attrs"
        v-on="listeners"
    >
        <Form 
            ref="form"
            :value="value"
            @input="$listeners.input"
        />
        <div 
            slot="footer" 
            class="dialog-footer"
        >
            <slot 
                v-if="hasFooterSlot" 
                name="footer" 
                slot="footer" 
            />
            
            <template v-else>
                <el-button 
                    :disabled="cancelBtnDisabled"
                    @click="handleCancel"
                >
                    {{ cancelText }}
                </el-button>

                <el-button 
                    type="primary" 
                    :loading="confirmBtnLoading"
                    :disabled="confirmBtnDisabled"
                    @click="handleConfirm"
                >
                    {{ confirmText }}
                </el-button>
            </template>
        </div>
    </el-dialog>
</template>

<style lang="scss"></style>